<template>
  <div>
    <h2>订单管理</h2>
    <table>
      <thead>
        <tr>
          <th>订单号</th>
          <th>客户姓名</th>
          <th>房间号</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in orders" :key="order.id">
          <td>{{ order.orderId }}</td>
          <td>{{ order.customerName }}</td>
          <td>{{ order.roomNumber }}</td>
          <td>{{ order.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'AppOrders',
  data() {
    return {
      orders: [
        { id: 1, orderId: '1001', customerName: '张三', roomNumber: '101', status: '已入住' },
        { id: 2, orderId: '1002', customerName: '李四', roomNumber: '102', status: '待入住' },
      ],
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
